<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>黑马360浏览器</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/fullpage.css">
</head>

<body>
    <!-- 固定导航栏 -->
    <div class="header">
        <div class="headerCountent">
            <img src="./images/logo.png" alt="">
            <div class="nav">
                <a href="#">论坛</a><a href="#">扩展</a><a href="#">Mac版</a>
            </div>
        </div>
    </div>
    <!-- 主体 -->
    <div id="fullpage">
        <div class="section section1">
            <!-- 第一屏 -->
            <div class="title-box">
                <p>畅快浏览 极致体验</p>
                <a href="#"></a>
            </div>
            <img src="./images/ball1.png" alt="" class="ball1">
            <img src="./images/ball2(1).png" alt="" class="ball2">
            <img src="./images/ship(1).png" alt="" class="ship">
        </div>
        <div class="section section2">
            <video autoplay loop muted>
                <source src="https://s2.ssl.qhres2.com/static/dfeefadde568eab0.mp4" type="video/mp4">
                你的浏览器版本太low了
            </video>
            <div class="word-content">
                <p class="bigword">极速</p>
                <div class="line"></div>
                <p class="midword">Chromium78全新内核</p>
                <p class="smallword">性能强劲，快如闪电。</p>
                <a href="#"></a>
            </div>
        </div>
        <div class="section section2">
            <video autoplay loop muted>
                <source src="https://s3.ssl.qhres2.com/static/9bebcedf292f327e.mp4" type="video/mp4">
            </video>
            <div class="word-content">
                <p class="bigword">极酷</p>
                <div class="line"></div>
                <p class="midword">暗夜炫黑模式</p>
                <p class="smallword">定义酷，定义你。</p>
                <a href="#"></a>
            </div>
        </div>
        <div class="section section2">
            <video autoplay loop muted>
                <source src="https://s1.ssl.qhres2.com/static/fdf92889c539303c.mp4" type="video/mp4">
            </video>
            <div class="word-content">
                <p class="bigword">极安全</p>
                <div class="line"></div>
                <p class="midword">DNS加密防劫持</p>
                <p class="smallword">安全升级，肆意无忌。</p>
                <a href="#"></a>
            </div>
        </div>
        <div class="section section2">
            <video autoplay loop muted>
                <source src="https://s1.ssl.qhres2.com/static/7e7f0ec4a0cc7a66.mp4" type="video/mp4">
            </video>
            <div class="word-content">
                <p class="bigword">极视界</p>
                <div class="line"></div>
                <p class="midword">4K高清视频播放</p>
                <p class="smallword">还原真实之美 ，尽显万物本色。</p>
                <a href="#"></a>
            </div>
            <!-- 第五屏底部 -->
            <div class="footer">
                Copyright © 2005-2019 360.CN All Rights Reserved 360互联网安全中心 隐私权政策 京ICP证080047号<br>
                <img src="./images/icon.png" alt=""> 京公网安备 11000002000006号
            </div>
        </div>
    </div>


    <script src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/fullpage.js"></script>
    <script>
        $(function () {
            $('#fullpage').fullpage({
                'navigation': true,
                /* 滚动到当前屏幕，文字模块渐渐显示出来 */
                afterLoad: function () {
                    $(this).find('.word-content').fadeIn();
                },
                /* 离开当前屏幕，文字模块渐渐淡出 */
                onLeave: function () {
                    $(this).find('.word-content').fadeOut()
                }
            });
        });
    </script>

</body>

</html>